<template>
    <div class="setting">
      <x-header class="header" :left-options="{showBack: showHeaderBack}">设置</x-header>
      <div class="topHolder"></div>
      <flexbox orient="vertical">
        <flexbox-item>
          <div class="avatar">
            <x-img :src="src" :offset="0"></x-img>
          </div>
        </flexbox-item>
      </flexbox>
      <group>
        <cell title="工号" :is-loading="workId == ''" :value="workId"></cell>
        <cell title="姓名" :is-loading="name == ''" :value="name"></cell>
        <cell title="手机号" :is-loading="phone == ''" :value="phone"></cell>
        <cell title="登录密码" is-link link="/password"></cell>
      </group>
      <box gap="1rem 0.8rem">
        <x-button type="warn" @click.native="doLoginOut" :show-loading="loadingStatus" :disabled="loadingStatus" text="退出登录"></x-button>
      </box>
    </div>
</template>

<script>
  import {loginOut,getUserInfo,contextPath} from '../api'
  import { XHeader, Flexbox, FlexboxItem ,XImg , Group, Cell, Box, XButton  } from 'vux'
  import {message,delLocalStorage} from "../common/util";
  import {clearvuex} from "../vuex/clear";

  export default {
    name:'setting',
    data(){
      return {
        showHeaderBack:this.GLOBAL.showHeaderBack,
        src:require('../assets/images/defaultAvatar.jpg'),
        workId:'',
        name:'',
        phone:'',
        loadingStatus:true,
        contextPath:contextPath
      }
    },
    components:{
      XHeader,
      Flexbox,
      FlexboxItem,
      XImg,
      Group,
      Cell,
      Box,
      XButton
    },
    computed:{
      weixinInfo(){
        return JSON.parse(sessionStorage.getItem("user"))
      },
      localUserInfo:{
        get () {
          return this.$store.getters.getLocalUserInfo
        },
        set (value) {
          this.$store.commit('updateLocalUserInfo', value)
        }
      }
    },
    methods:{
      doLoginOut(){
        this.loadingStatus = true
        loginOut().then((res)=>{
          //console.log(res)
          if(res.status == 'success'){
            delLocalStorage('token_sales_index' + sessionStorage.getItem('index'))
            delLocalStorage('userId_sales_index' + sessionStorage.getItem('index'))
            clearvuex()
            this.$router.push({path:'/login'})
          }else if(res.status == 'error'){
            console.log('loginOut error info:',res.msg)
            message({message:res.msg,type: 'error'})
          }
          this.loadingStatus = false
        }).catch((err)=>{console.log('loginOut catch info:',err)})
      }
    },
    mounted(){
      this.src = this.weixinInfo.headimgurl
      return new Promise((resolve, reject)=>{
        if(JSON.stringify(this.localUserInfo) == '{}')
          getUserInfo().then((res)=>{
            //console.log(res)
            if(res.status == 'success'){
              this.localUserInfo = res.data
              //this.$store.commit('updateLocalUserInfo',res.data)
            }else if(res.status == 'error'){
              console.log('getUserInfo error info:',res.msg)
              message({message:res.msg,type: 'error'})
            }
            resolve()
          }).catch((err)=>{console.log('getUserInfo catch info:',err)})
        else resolve()
      }).then(()=>{
        let {JOB_NUMBER,NAME,PHONE} = this.localUserInfo
        this.workId = JOB_NUMBER
        this.phone = PHONE
        this.name = NAME
        this.loadingStatus = false
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      })
    }
  }
</script>

<style lang="scss" scoped>
  .setting{
    .avatar{
      margin-top:1rem;text-align: center;
      img{width:7rem;border-radius: 7rem;box-shadow: 0 0 10px 1px #e0e0e0;}
    }
  }
</style>
